<template>
	<view class="page-container back-grey-light">
		<view>
			<view class="pall-base">
				<text class="grey-light">商品规格(如：小份,大份)</text>
			</view>
			<view v-for="(item, index) in spLists" :key="index" class="mb-base">
				<view class="prow-l back-white info-grid">
					<text>规格名</text>
					<u-input v-model="item.name" type="name" :maxlength="10" placeholder="请输入规格名(如小份,大份)" placeholder-style="color: #999;font-size: 26rpx;line-height: 40rpx;" />
				</view>
				<view class="prow-l back-white info-grid">
					<text>价格(元)</text>
					<u-input v-model="item.price" type="digit" :maxlength="10" placeholder="请输入价格" placeholder-style="color: #999;font-size: 26rpx;line-height: 40rpx;" />
				</view>
				<view class="prow-l back-white info-grid">
					<text>餐盒费(元)</text>
					<u-input v-model="item.boxPrice" type="digit" :maxlength="10" placeholder="请输入餐盒费" placeholder-style="color: #333;font-size: 26rpx;line-height: 40rpx;" />
				</view>
				<view class="prow-l back-white info-grid" @click="removeCate(index)">
					<u-icon class="pall-base" name="trash-fill" :color="redColor" :size="36"
						label='删除' label-size="26" label-pos="right" :label-color="redColor" margin-left="4">
					</u-icon>
				</view>
			</view>
			
		</view>
		
		<!-- 悬浮按钮-添加分类 -->
		<view class="radius-circle back-white add-button" @click="addCate()">
			<image class="icon" src="../static/新增.png"></image>
		</view>
		
		<!-- 提交按钮 -->
		<view class="back-white submit-button-box" style="padding: 24rpx 0;">
			<view class="submit-button back-primary" @click="submitHandle()">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				spLists: [], // 规格列表
				
			};
		},
		onLoad(options) {
			if (options.spLists) {  // 已有规格
				this.spLists = JSON.parse(options.spLists)
			} else { // 未有规格
				this.spLists.push({
					name: '',
					price: '',
					boxPrice: '0',
					isDefault: 0
				})
			}
		},
		methods: {
			// 添加分类-空分类
			addCate() {
				this.spLists.push({
					name: '',
					price: '',
					boxPrice: '0',
					isDefault: 0
				})
			},
			
			// 删除分类
			removeCate(index) {
				uni.showModal({
					content: '确定删除该分类？',
					confirmText: '确定',
					confirmColor: this.redColor,
					success: (res) => {
						if (res.confirm) {
							this.spLists.splice(index, 1)
						}
					}
				})
			},
			
			// 保存分类
			submitHandle() {
				let flag = 0
				let length = this.spLists.length
				for (var i = 0; i < length; i++) {
					let cur = this.spLists[i]
					if (!cur.name) {
						uni.showToast({
							icon: 'none',
							title: '规格名不能为空！'
						})
						flag = 1
						break
					} else if (!cur.price) {
						uni.showToast({
							icon: 'none',
							title: '价格不能为空！'
						})
						flag = 1
						break
					} else if (!this.priceReg.test(cur.price) || !this.priceReg.test(cur.boxPrice)) {
						uni.showToast({
							icon: 'none',
							title: '请检查价格或餐盒费格式！'
						})
						flag = 1
						break
					}
				}
				if (flag) return
				const page = getCurrentPages()
				let prePage = page[page.length-2]
				// console.log(prePage)
				// prePage.$vm.spLists = []
				prePage.$vm.spLists = this.deepClone(this.spLists)
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 136rpx;
	}
	
	// 信息项
	.info-grid {
		height: 94rpx;
		display: grid;
		grid-template-columns: 208rpx 1fr;
		align-items: center;
		border-bottom: 2rpx solid #f0f0f0;
		&:last-child {
			display: flex;
			justify-content: center;
			border-bottom: none;
		}
	}
	
	// 提交盒子
	.submit-button-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		
	}
	
	// 新增分类按钮
	.add-button {
		position: fixed;
		right: 32rpx;
		bottom: 156rpx;
		z-index: 99;
		.icon {
			display: block;
			width: 73rpx;
			height: 72rpx;
		}
	}
</style>
